<template>
  <div class="clearfix" v-loading="loading">
    <el-row class="base_content_title">
      <el-col :span="24" class="content_title">
        <el-col :span="12">
          <HeadTitle></HeadTitle>
        </el-col>
        <el-col :span="12"></el-col>
      </el-col>
    </el-row>
    <el-col :span="24" class="content_edit pd_20" style="padding-top:20px;">
      <div id="diy-phone" style="margin-top:0">
        <div class="diy-phone-header">
          <i class="diy-phone-receiver"></i>
          <div class="diy-phone-title j-pagetitle"></div>
        </div>
        <div class="diy-phone-contain" id="j-materialPrev">
          <div class="materialPrePanel mgt20">
            <p>商学院：</p>
            <div>
              <!-- <dt> -->
              <div class="single-summary" v-html="add_form.content"></div>

            </div>
          </div>
        </div>
        <i class="diy-phone-footer"></i>
      </div>
      <div class="relative f_l floatBox-width" style="margin-left: 25px;position: relative;width:60%">
        <div class="black">
          <div class="add_con_form" style="padding-left: 25px;">
            <el-form label-position="right" :model="add_form">
              <el-form-item label="标题：" :label-width="formLabelWidth">
                <el-col :span="16">
                  <el-input type="text" :rows="6" clearable placeholder="请输入" v-model="add_form.title" autocomplete="off"></el-input>
                </el-col>
              </el-form-item>

              <el-form-item label="图片：" :label-width="formLabelWidth">
                <el-col :span="16">
                  <el-input v-model="add_form.piclink" disabled></el-input>
                  <uploadpic :piclink="add_form.piclink" :width="300" :height="132" :real_width="700" :real_height="308" :is_more="false" @send_pic="onSuccess"></uploadpic>
                </el-col>
              </el-form-item>
              <el-form-item label="视频：" :label-width="formLabelWidth">
                <el-col :span="16">
                  <el-input type="text" :rows="6" clearable placeholder="请输入" v-model="add_form.video" autocomplete="off"></el-input>
                </el-col>
                <el-button type="success" :loading="$store.state.isLoading" @click="uploadVideo(add_form.video)">点击上传</el-button>
              </el-form-item>

              <!-- <el-form-item label="是否需要考试：" :label-width="formLabelWidth">
                <el-col :span="16">
                  <switchc v-model="add_form.is_examination" @change="getIskeck" text="已开启|已关闭"></switchc>
                </el-col>
              </el-form-item> -->
            </el-form>
          </div>
        </div>

        <div class="black" style="display:flex;">
          <div class="ueditor">
            <ue v-model="add_form.content" v-loading="loadding1" v-if="!loadding1" :value="add_form.content" style="width:375px" upload-url="/api/common/upload/index/" fileName="file" />
            <div class="blank"></div>
          </div>

        </div>
        <div class="submit_button">
          <el-col :span="24" class="tc">
            <el-button :loading="$store.state.isLoading" type="primary" @click="subForm">保存</el-button>
          </el-col>
        </div>
      </div>

    </el-col>
    <el-dialog :close-on-click-modal="false" @close="close_video" title="上传视频" :append-to-body="true" :visible.sync="dialogFormVisible">
      <uploadvideo @send_url="rev_send_url" :pro_src="add_form.video" ref="video_plugin"></uploadvideo>
    </el-dialog>
  </div>
</template>
<script>
import HeadTitle from "@/components/currency/HeadTitle.vue";
import uploadpic from "@/components/page/pic/up_pic";
import ue from "@/components/currency/Ue/ue.vue";
import switchc from "@/components/currency/Swich";
import uploadvideo from "@/components/currency/uploadvideo";
export default {
  data() {
    return {
      dialogFormVisible: false,
      pic_list: [],
      add_form: {
        content: "",
      },
      loadding1: true,
      loading: true,
      formLabelWidth: "120px",
    };
  },
  watch: {},
  components: {
    HeadTitle,
    ue,
    uploadpic,
    switchc,
    uploadvideo,
  },
  methods: {
    close_video() {
      this.dialogFormVisible = false;
      this.$refs.video_plugin.close_video();
    },
    rev_send_url(obj) {
      this.dialogFormVisible = false;
      this.add_form.video = obj.video_url;
      this.add_form.vid = obj.video_id;
    },
    uploadVideo() {
      this.dialogFormVisible = true;
    },
    onSuccess(pic) {
      this.add_form.piclink = pic;
    },
    getIskeck(val) {
      this.add_form.is_examination = val;
    },
    add_picpart() {
      this.pic_list.push({ title: "", pic: "" });
    },

    subForm() {
      if (this.$route.query.id == undefined) {
        this.add_submit();
      } else {
        this.edit_submit();
      }
    },
    add_submit() {
      var params = {};
      params = this.add_form;
      this.$api.getCollege.add_college_list(params).then((res) => {
        if (res.data.status == 1 && res.data.code == 200) {
          this.$fnc.alertSuccess({
            text: "添加成功",
            url: this.$router.replace("/index/college/college_list"),
          });
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    },
    edit_submit() {
      //修改
      var params = {};
      params = this.add_form;
      this.$api.getCollege.edit_college_list(params).then((res) => {
        if (res.data.status == 1 && res.data.code == 200) {
          this.$fnc.alertSuccess({
            text: "修改成功",
            url: this.$router.back(-1),
          });
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    },
  },

  beforeCreate() {
    //数据未加载之前调用loading
    this.loading = true;
  },
  created() {
    this.loading = false;
    if (this.$route.query.id) {
      this.$api.getCollege
        .single_college_list({ id: this.$route.query.id })
        .then((res) => {
          if (res.data.code == 200) {
            this.add_form = {
              id: res.data.result.id,
              title: res.data.result.title,
              content: res.data.result.content,
              piclink: res.data.result.piclink,
              video: res.data.result.video,
              vid: res.data.result.vid,
              is_examination: res.data.result.is_examination,
            };

            this.loadding1 = false;
            this.loading = false;
          }
        });
    } else {
      this.add_form = {
        title: "",
        content: "",
        piclink: "",
        video: "",
        vid: "",
        is_examination: "1",
        show: 1,
      };

      this.loadding1 = false;
      this.loading = false;
    }
  },
  mounted() {},
  computed: {},
};
</script>
<style scoped>
.course_phone {
  width: 100%;
  height: 120px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.course_phone_left {
  width: 60%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.course_phone_left h1 {
  line-height: 32px;
}

.course_phone_left p {
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 20px;
}

.course_phone_right {
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;

  height: 100%;
}

.course_phone_right img {
  height: 100%;
  border: 1px solid #eeeeee;
}

.course_phone_video {
  width: 95%;
  /* padding: 10px; */
  margin: 0 auto;
  border-top: 1px solid #eeeeee;
}

.course_phone_video p {
  font-size: 12px;
  /* color: #000; */
  line-height: 28px;
}

.course_phone_video video {
  width: 100%;
}
.add_piclist {
  flex: 1;
}
</style>
